<template>
  <view class="viewpoint" :style="{ paddingTop: safeAreaInsets!.top + 'px'}">
    <view class="visit-back-icon" @tap="back">
      <image class="avatar" src="../../../static/visit/back.png" mode="scaleToFill"
    /></view>
    <h2 class="title">
      {{
        show == 1
          ? '新增随访-填写随访信息'
          : '' || show == 2
          ? '新增随访-选择随访患者'
          : '' || show == 3
          ? '查看随访详情'
          : '' || show == 4
          ? '修改随访信息'
          : ''
      }}
    </h2>
    <view class="title"></view>
    <view class="visit-op" v-if="show == 1">
      <view class="op-item" @tap="addVisit(-1)">新增预约</view>
      <view class="op-item" @tap="addVisit(0)">存为草稿</view>
      <view class="op-item" @tap="addVisit(1)">完成随访</view>
    </view>
    <view class="visit-op" v-if="show == 3">
      <view class="op-item" v-if="visitSign == -1 || visitSign == 0" @tap="toModifyVisit"
        >修改随访</view
      >
    </view>
    <view class="visit-op" v-if="show == 4">
      <view class="op-item" @tap="deleteVisit">作废</view>
      <view class="op-item" @tap="modifyVisit(1)">完成随访</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/index'
const props = defineProps({
  show: {
    type: Number,
  },
  visitSign: {
    type: Number,
  },
})
const { safeAreaInsets } = uni.getSystemInfoSync()

// 父组件的触发事件
const emit = defineEmits(['addVisit', 'deleteVisit', 'modifyVisit'])

//添加随访记录
const addVisit = (visitSign: number) => {
  // 调用父组件函数和传参
  emit('addVisit', visitSign)
}

//删除随访记录
const deleteVisit = () => {
  emit('deleteVisit')
}

//跳转到随访修改页
const toModifyVisit = () => {
  uni.navigateTo({ url: '/pages/index/visit/components/ModifyVisit' })
}

//修改随访记录
const modifyVisit = (visitSign: number) => {
  emit('modifyVisit', visitSign)
}

const back = () => {
  uni.navigateBack({
    delta: 1, //返回层数，2则上上页
  })
}
</script>

<style lang="scss">
.viewpoint {
  height: 50rpx;
  width: 100%;
  background-image: linear-gradient(to right, #cfe1ee, #eadaec);
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  position: relative;
  .title {
    color: #000;
    font-size: 14rpx;
    font-weight: bold;
  }
  .visit-back-icon {
    height: 100%;
    display: flex;
    align-items: center;
    .avatar {
      height: 20rpx;
      width: 20rpx;
    }
  }
}
.visit-op {
  position: absolute;
  right: 20rpx;
  display: flex;
  .op-item {
    color: #000;
    font-size: 11rpx;
    margin-left: 10rpx;
    font-weight: bold;
  }
}
</style>
